<template>
  <div>
    <div id="main" style="width: 100%; height: 100vh"></div>
    <!-- 添加按钮 -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import { queryInternalConnect } from "src/js/api";

export default {
  name: "RelationsPage",

  myChart: null,
  mounted() {
    var chartDom = this.$el.querySelector("#main");
    this.myChart = echarts.init(chartDom);
    this.loadData();
  },
  methods: {
    async loadData() {
      let myChart = this.myChart;
      myChart.showLoading();
      let response = await queryInternalConnect();
      myChart.hideLoading();
      // let response = queryInternalConnect();
      const graph = response.data.data;
      graph.nodes.forEach(function (node) {
        node.label = {
          show: true, //node.symbolSize > 30,
        };
      });
      let option = {
        title: {
          text: "潜在协力关系图",
          subtext: "拥有共同客户的会友",
          top: "top",
          left: "center",
        },
        tooltip: {},
        legend: [
          {
            top: "bottom",
            left: "center",
            data: graph.categories.map(function (a) {
              return a.name;
            }),
          },
        ],
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            name: "内部联系图",
            type: "graph",
            layout: "circular",
            circular: {
              rotateLabel: true,
            },
            data: graph.nodes,
            links: graph.links,
            categories: graph.categories,
            roam: true,
            label: {
              position: "right",
              formatter: "{b}",
            },
            lineStyle: {
              color: "source",
              curveness: 0.3,
            },
            edgeLabel: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.data.same || ""; // 假设连线数据有 'type' 属性
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);

      option && myChart.setOption(option);
    },
  },
};
</script>
